<template>
	<view class="ListTitle">
		<view v-for="(item,index) in list" :key="index" class="ListTitle-item" :class="{'isActive': currentIndex==index}" @click="changeType(index)">
			{{item}}
		</view>
	</view>
</template>

<script>
	export default{
		data() {
			return {
				list: ["全部","进行中","已完成"],
				currentIndex:0
			}
		},
		methods:{
			changeType(index){
				this.currentIndex = index
				this.$emit("orderStatus",this.currentIndex)
			}
		}
	}
</script>

<style scoped>
	.ListTitle{
		position: absolute;
		top: 255rpx;
		left: 0rpx;
		right: 0rpx;
		width: 90%;
		margin: 0rpx 40rpx;
		height: 100rpx;
		background-color: #FFFFFF;
		border: 1rpx solid #FFFFFF;
		border-radius: 30rpx;
		display: flex;
		justify-content: space-between;
		/* align-items: center; */
		padding: 0 80rpx;
	}
	.ListTitle-item{
		
		padding: 30rpx;
	}
	.isActive{
		color: #0C34BA;
		border-bottom: 5rpx solid #0C34BA;
	}
</style>
